<template>
  <a-modal
    v-model:open="open"
    :title="props.title"
    @cancel="modelCancel"
    :width="props.width"
    @ok="submitOk"
  >
    <a-table :columns="columns" :data-source="dataList" :scroll="{ x: 3500 }">
      <template #headerCell="{ column }">
        <template v-if="column.key === 'username'">
          <span>
            <smile-outlined />
            {{ column.title }}
          </span>
        </template>
      </template>

      <template #bodyCell="{ column, record }">
<!--        <template v-if="column.key === 'action'">-->
<!--          <a-button type="link" size="small"  style="padding: 0"-->
<!--          >标记为已核对-->
<!--          </a-button>-->
<!--          <a-button type="dashed" size="small"  style="padding: 0"-->
<!--          >标记为未核对-->
<!--          </a-button>-->
<!--        </template>-->
      </template>
    </a-table>
  </a-modal>
</template>
<script lang="ts" setup>
import { ref, watch, watchEffect } from 'vue'
import { SmileOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import Api from '@/api'

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  onCancel: () => {
  },
  onOk: () => {
  },
  width: 1400,
  title: ''
})
const open = ref<boolean>(props.modelValue)
// 数据
const dataList = ref<object[]>([])

interface Props {
  modelValue: boolean
  onOk: () => void
  onCancel: () => void
  title?: string
  width?: number
  record?: object
}

// 获取数据
const fetchData = async () => {
  const res = await Api.general.detailList({
    data: {
      ...props.record
    }
  })
  if (res.data) {
    dataList.value = res.data || []
  } else {
    message.error('获取数据失败 ' + res.msg)
  }
}

watchEffect(() => {
  fetchData()
})


const submitOk = async () => {
  props.onOk()
}

// 监听 modelValue 的变化，并更新 open 的值
watch(
  () => props.modelValue,
  (newVal) => {
    open.value = newVal
  }
)
watch(
  () => props.record,
  (newVal) => {
    console.log(newVal)
  }
)

const modelCancel = () => {
  open.value = false
  props.onCancel()
}

const columns = ref([
  {
    "key": "核对标志",
    "title": "核对标志",
    "dataIndex": "核对标志",
    "width": 100,
  },
  {
    "key": "卖货单号",
    "title": "卖货单号",
    "dataIndex": "卖货单号",
    "width": 100,
  },
  {
    "key": "卖货时间",
    "title": "卖货时间",
    "dataIndex": "卖货时间",
    "width": 200
  },
  {
    "key": "品名",
    "title": "品名",
    "dataIndex": "品名"
  },
  {
    "key": "规格",
    "title": "规格",
    "dataIndex": "规格"
  },

  {
    "key": "车号",
    "title": "车号",
    "dataIndex": "车号",
    "width": 180
  },
  {
    "key": "毛重",
    "title": "毛重",
    "dataIndex": "毛重"
  },
  {
    "key": "皮重",
    "title": "皮重",
    "dataIndex": "皮重"
  },
  {
    "key": "净重",
    "title": "净重",
    "dataIndex": "净重",
    "width": 100
  },
  {
    "key": "收货单位",
    "title": "收货单位",
    "dataIndex": "收货单位",
    "width": 100
  },
  {
    "key": "运输单位",
    "title": "运输单位",
    "dataIndex": "运输单位",
    "width": 100
  },
  {
    "key": "发货单位",
    "title": "发货单位",
    "dataIndex": "发货单位",
    "width": 100
  },
  {
    "key": "单价",
    "title": "单价",
    "dataIndex": "单价"
  },
  {
    "key": "应收金额",
    "title": "应收金额",
    "dataIndex": "金额",
    "width": 100
  },
  {
    "key": "实收金额",
    "title": "实收金额",
    "dataIndex": "实收金额",
    "width": 100
  },
  {
    "key": "金额大写",
    "title": "金额大写",
    "dataIndex": "金额大写",
    "width": 100
  },
  {
    "key": "单位",
    "title": "单位",
    "dataIndex": "单位"
  },

  {
    "key": "折合方数",
    "title": "折合方数",
    "dataIndex": "折合方数",
    "width": 100
  },

  {
    "key": "合同编号",
    "title": "合同编号",
    "dataIndex": "合同编号",
    "width": 100
  },

  {
    "key": "备注",
    "title": "备注",
    "dataIndex": "备注",
    "width": 100
  },
  {
    "key": "发料员",
    "title": "发料员",
    "dataIndex": "发料员",
    "width": 100
  },
  {
    "key": "质检员",
    "title": "质检员",
    "dataIndex": "质检员",
    "width": 100
  },
  {
    "key": "送货人",
    "title": "送货人",
    "dataIndex": "送货人",
    "width": 100
  },
  {
    "key": "司磅员",
    "title": "司磅员",
    "dataIndex": "司磅员",
    "width": 100
  },
  {
    "key": "结算方式",
    "title": "结算方式",
    "dataIndex": "结算方式",
    "width": 100
  },


  {
    "key": "含水率",
    "title": "含水率",
    "dataIndex": "含水率"
  },
  {
    "key": "折算系数",
    "title": "折算系数",
    "dataIndex": "折算系数",
    "width": 100
  },
  {
    "key": "备用1",
    "title": "备用1",
    "dataIndex": "备用1"
  },
  {
    "key": "备用2",
    "title": "备用2",
    "dataIndex": "备用2"
  },
  {
    "key": "备用3",
    "title": "备用3",
    "dataIndex": "备用3",
    "width": 100
  },
  {
    "key": "备用4",
    "title": "备用4",
    "dataIndex": "备用4",
    "width": 100
  },
  // {
  //   "key": "action",
  //   "title": "操作",
  //   "dataIndex": "操作",
  //   "width": 100,
  //   fixed: "right",
  // }
])
</script>
